<template>
	<a-dropdown v-if="ColumnList.length" :placement="'bottomLeft'">
		<div class="cols-box">
			<header class="tips">注:支持拖动排序(固定列除外)</header>
			<draggable
				v-model="ColumnList"
				handle=".mover"
				chosenClass="chosen"
				forceFallback="true"
				group="people"
				animation="1000"
				@start="startFn"
				@update="onEnd">
				<transition-group>
					<div class="col-items" :class="item.fixed ? 'cantMove' : 'mover'" v-for="item in ColumnList" :key="item.dataIndex">
						<a-checkbox :checked="item.checked" @change="(e) => onChange(item.dataIndex, e)"
							>{{ typeof item.title == 'string' ? item.title : typeof item.title == 'function' ? item.title() : ''
							}}{{ item.fixed && '(固定列不可拖动)' }}</a-checkbox
						>
					</div>
				</transition-group>
			</draggable>
			<div class="btn-box">
				<a @click="onChange('all')">重置</a>
				<a @click="onChange('clear')">清空</a>
				<div class="btn-css" @click="submitData">确定</div>
				<div class="btn-css" @click="handleSaveCol">保存</div>
			</div>
			<footer class="text-box">
				<span>当前({{ title }})</span>
				<a @click="lookMore">查看更多</a>
			</footer>
		</div>
	</a-dropdown>
</template>
<script>
import draggable from 'vuedraggable';
export default {
	name: 'colmun',
	props: {
		// 后续调接口 就可能获取到用户勾选的字段内容了
		checkColumnList: {
			type: Array,
			default: () => {
				return [];
			}
		},
		currentSetTitle: {
			type: String
		}
	},
	components: { draggable },
	computed: {},
	// 后续prop有变化就监听它
	watch: {
		checkColumnList() {
			this.setColumnList();
		},
		currentSetTitle(val) {
			this.title = val;
		}
	},
	created() {},
	// mounted只会执行一次
	mounted() {
		this.setColumnList();
		if (this.currentSetTitle) {
			this.title = this.currentSetTitle;
		}
	},
	data() {
		return { isAllchecked: true, ColumnList: [], title: '初始格式' };
	},
	methods: {
		setColumnList() {
			let arr = JSON.parse(JSON.stringify(this.checkColumnList));
			if (arr[0].title == '序号') {
				arr.shift();
			}
			this.ColumnList = arr;
		},
		onEnd() {},
		startFn(e) {},
		onChange(title, value) {
			if (title === 'all') {
				this.ColumnList.forEach((item) => {
					item.checked = !this.isAllchecked;
				});
				this.isAllchecked = !this.isAllchecked;
			} else if (title === 'clear') {
				this.ColumnList.forEach((item) => {
					item.checked = false;
				});
				this.isAllchecked = false;
			} else {
				let checkedNum = 0;
				this.ColumnList.forEach((item) => {
					if (item.dataIndex === title) {
						item.checked = value.target.checked;
					}
					item.checked && checkedNum++;
				});
				this.isAllchecked = this.ColumnList.length == checkedNum;
			}
		},
		submitData() {
			this.title = '临时格式';
			this.$emit('submitData', this.ColumnList);
		},
		handleSaveCol() {
			this.$emit('handleSaveCol', this.ColumnList);
		},
		lookMore() {
			this.$emit('lookMore');
		}
	}
};
</script>
<style scoped lang="less">
.cols-box {
	border-radius: 4px;
	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
	padding: 5px 10px;
}
.tips {
	padding: 5px 0;
	font-weight: bold;
	color: red;
}
.btn-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
}
.text-box {
	display: flex;
	justify-content: space-between;
}
.btn-css {
	padding: 0px 10px;
	border-radius: 8px;
	background: #1890ff;
	color: white;
	cursor: pointer;
}
</style>
